<template>
	<view>
		<view v-if='account == "" || changeAccount == true'>
			<view style='color:#909399;font-size: 14px;padding:10px 10px 0px 10px;'>
				请输入提现银行卡信息
			</view>
			<view style='padding:10px;'>
				<u--form label-width='100px;'>
					<u-form-item label="真实姓名" borderBottom ref="item1">
						<u--input v-model="cardInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="身份证号" borderBottom ref="item1">
						<u--input v-model="cardInfo.idCardNo" border="none"></u--input>
					</u-form-item>
					<u-form-item label="银行卡号" borderBottom ref="item1">
						<u--input v-model="cardInfo.cardNo" border="none" ></u--input>
					</u-form-item>
					<u-form-item label="预留手机" borderBottom ref="item1">
						<u--input v-model="cardInfo.phone" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class='footer'>
				<view style='padding:10px;'>
					<u-button size='large' type='primary' text='保存' @click='getAccount' shape='circle' :plain='true' ></u-button>
				</view>
			</view>
		</view>
		<view v-else>
			<view style='padding:30px 20px;background-color: #f3f3f3;'>
				<view>
					<u-row align='top'>
						<u-col span='4'>
							<view>
								<text style='color:#303133;font-size:16px;'>到账银行卡</text>
							</view>
						</u-col>
						<u-col span='7'>
							<view>
								<view style='color:#303133;font-size:16px;font-weight: bold;'>
									<view v-if='account == ""'>
										
									</view>
									<view v-else>
										{{maskCardNumber(cardInfo.cardNo)}}
									</view>
								</view>
								<view style='color:#303133;font-size:14px;padding-top:10px'>2小时到账</view>
							</view>
						</u-col>
						<u-col span='1'>
							<view style='text-align: right;padding-top:10px' @click='changeAccount = true'>
								<u-icon name="arrow-right" color='#909399'></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class='tips'>
					提现时间为每天<text class='time'>{{startTime}}</text>到<text class='time'>{{endTime}}</text>,其他时间暂不支持提现
			
				</view>
			</view>
			
			<view style='padding:20px;background-color: #fff;border-radius: 10px 10px 0px 0px;'>
				<view style='color:#606266;padding:10px 0px;'>提现金额</view>
				<view>
					<u-row>
						<u-col span='1'>
							<view>
								<text style='font-size:25px'>￥</text>
							</view>
						</u-col>
						<u-col span='11'>
							<view>
								<u--input fontSize='25px' height='40px' border="none" v-model="price"
									type='number'></u--input>
							</view>
						</u-col>
					</u-row>
					<u-line></u-line>
					<view @click='payAll' style='padding-top:10px;color:#909399'>
						<text>当前零钱余额{{amount}}元，</text>
						<text style='color:#2979ff'>全部提现</text>
					</view>
				</view>
			</view>
			<view class='footer'>
				<view style='padding:10px'>
					<view style='padding-left:10px'>
						<u-button v-if='loading' type='success' text='确定提现' disabled shape='circle'></u-button>
						<u-button v-else type='success' text='确定提现' @click='submit' shape='circle'></u-button>
					</view>
					</u-col>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				startTime: '',
				endTime: '',
				price: '',
				loading: false,
				cardInfo: {
					cardNo: '',
					name: '',
					idCardNo: '',
					phone: ''
				},
				account: '',
				changeAccount: false,
			}
		},
		onReachBottom() {

		},
		onShow() {
			let cardInfo = uni.getStorageSync('cardInfo')
			if(cardInfo != ''){
				this.cardInfo = cardInfo
				this.getAccount()
			}
			this.getBalance()
		},
		onLoad() {
			this.request.get(`api/options/WITHDRAW_START_TIME`).then((res) => {
				this.startTime = res.data.value
			})
			this.request.get(`api/options/WITHDRAW_END_TIME`).then((res) => {
				this.endTime = res.data.value
			})
		},
		methods: {
			payAll() {
				this.price = this.amount
			},
			getBalance() {
				this.request.get(`api/balances`).then((res) => {
					if(res.data && res.data.amount){
						this.amount = res.data.amount
					}
				})
			},
			getAccount(){
				console.log(this.cardInfo)
				if(this.cardInfo.name.trim() == '' || this.cardInfo.phone == '' || this.cardInfo.idCardNo == '' || this.cardInfo.cardNo == ''){
					uni.showToast({
						title: '请输入相关信息',
						icon: 'none'
					})
					return
				}
				uni.showLoading()
				this.cardInfo.cardNo = this.cardInfo.cardNo.replace(/\ +/g, '')
				this.cardInfo.phone = this.cardInfo.phone.replace(/\ +/g, '')
				const cardInfo = {
					card_no: this.cardInfo.cardNo,
					mp: this.cardInfo.phone,
					card_name: this.cardInfo.name,
					cert_no: this.cardInfo.idCardNo,
					card_type: 1,
					prov_id: '310000',
					area_id: '310100',
					band_code: '01030000',
					cert_type: '00',
					cert_validity_type: 0,
					cert_begin_date: '20150101',
					cert_end_date: '20350101'
				}
				let postData = {
					mobile_no: this.cardInfo.phone,
					card_info: cardInfo,
				}
				console.log('date', postData)
				this.request.post(`api/huifu-accounts/register/individual-user`, postData).then((res) => {
					uni.hideLoading()
					this.account = res.data
					uni.setStorageSync('cardInfo',this.cardInfo)
					this.changeAccount = false
				}).catch((err) => {
					this.changeAccount = false
					uni.hideLoading()
				})
			},
			submit() {
				if(this.account == ''){
					uni.showModal({
						title: '',
						content: '请先填写提现银行卡',
						showCancel: false,
						success: () => {
							this.changeAccount = true
						}
					})
					return
				}
				// loading发送中直接return
				if (this.loading) {
					return
				}
				// 提现操作
				if (this.price <= 0) {
					uni.showToast({
						title: '请输入正确提现金额！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) < 1) {
					uni.showToast({
						title: '最小提现金额为1元！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) > parseFloat(this.amount)) {
					uni.showToast({
						title: '超出最大可提现金额！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) > 500000) {
					uni.showToast({
						title: '单次提现限额5万！',
						icon: 'none'
					})
					return
				}

				// 前端判断提现时间
				let date = new Date()
				let withdrawStartTime = new Date(
					`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${this.startTime}:00`)
				let withdrawEndtime = new Date(
					`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${this.endTime}:00`)
				console.log(date.getTime(), withdrawEndtime.getTime(), withdrawStartTime.getTime())
				if (date.getTime() < withdrawStartTime.getTime() || date.getTime() > withdrawEndtime.getTime()) {
					uni.showModal({
						title: '',
						content: `可提现时间为${this.startTime}到${this.endTime}`,
						showCancel: false,
						success: () => {

						}
					})
					return
				}
				this.loading = true
				uni.showLoading()
				this.request.post(`api/withdraws`, {
					payment: 'huifu',
					amount: this.price,
					extraData: {
						immediately: true,
						to_account: this.account.id
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.data.status === 'accepted' || res.data.status === 'scheduled') {
						uni.showModal({
							title: '',
							content: '申请成功，请留意银行卡信息！',
							showCancel: false,
							success: () => {
								uni.redirectTo({
									url: '/pages/mine/withdrawal-logs'
								})
							}
						})
					} else {
						this.loading = false
						uni.showModal({
							title: '',
							content: '银行系统维护中，请稍后重试',
							showCancel: false,
						})
					}
				}).finally(() => {
					uni.hideLoading()
					this.loading = false
				})
			},
			maskCardNumber(cardNumber) {
				if (cardNumber.length < 8) {
					return cardNumber;
				}
				var maskedNumber = cardNumber.substr(0, 4) + "*".repeat(cardNumber.length - 8) + cardNumber.substr(-4);
				return maskedNumber;
			}
		}
	}
</script>

<style>
	.content {
		/* background-color: #f3f3f3; */
		min-height: 100vh;
	}

	.tips {
		color: #909399;
		font-size: 12px;
		padding-top: 20px;
		/* background-color: #fcbd71; */
	}

	.time {
		color: #ff9900;
		padding: 0px 5px;
	}

	.card {
		background-color: #fff;
		border-radius: 5px;
	}
</style>